* { margin: 0; padding: 0 }
body, html { margin: 0; padding: 0; font-size: 12px; }
ul, li { list-style: none; margin: 0; padding: 0 }
body { background-color: #000; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); max-width: 640px; margin: 0 auto; }
.lhj_topimg { width: 100%; }
.lhj_top { background-image: url(../images/lhjtop_bg1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center bottom;  overflow: hidden; height: 133px;background-color: #000; }
.lhj_top2 { background-image: url(../images/lhjtop_bg2.jpg); }
.lhj_ns { width: 100%; height: 30px; background-image: url(../images/ns1.jpg); background-size: 100%  100%; background-repeat: no-repeat; background-position: center ; color: #f8bc06; line-height: 30px; font-size: 12px; position: relative; }
.lhj_ns span{ margin-right: 8px;  margin-left: 8px;  }
.lhj_con { position: relative;  width: 100%; height: 279px;  background-image: url(../images/lhj_con1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; }
.consumption{width: 60%; text-align: center; position: absolute; left: 20%; color: #f8bc06;font-size: 14px; font-weight: bold; padding: 5px 0; bottom: 145px; opacity: 0; z-index: 9; background-image: url(../images/allbg.png); background-size: cover;background-repeat: no-repeat;background-position: center; }
.consumption_xf{ animation: consumption 2s  ;-webkit-animation: consumption 2s  ;}
@keyframes consumption {
	0% { opacity: 0 ;bottom: 135px;transform:scale(1)}
	50% { opacity: 1 ;bottom: 160px; transform:scale(1.02)}
	100% { opacity: 0 ;bottom: 185px;transform:scale(1)}
}
@-webkit-keyframes consumption {
	0% { opacity: 0 ;bottom: 135px;-webkit-transform:scale(1)}
	50% { opacity: 1 ;bottom: 160px; -webkit-transform:scale(1.02)}
	100% { opacity: 0 ;bottom: 185px;-webkit-transform:scale(1)}
}
#run_up , #run_down { padding: 12px 0; position: relative; z-index: 10}
 #run_left, #run_right { padding: 0 8px; position: relative; z-index: 10}
#run_up li, #run_down li, #run_left li, #run_right li { width: 10px; height: 10px; float: left; background-color: #f5d968; border-radius: 50%; margin-left: 7.6%; box-shadow: #f5d968 0px 0px 10px; animation: deng 1s ease-in-out infinite; -webkit-animation: deng 1s ease-in-out infinite; -o-animation: deng 1s ease-in-out infinite; }
@keyframes deng {
	0% { background-color: #f56879; box-shadow:    0px 0px 15px 5px #f56879  }
	16% { background-color: #f568dc; box-shadow:   0px 0px 15px 5px #f568dc  }
	32% { background-color: #6b68f5; box-shadow:   0px 0px 15px 5px #6b68f5  }
	48% { background-color: #68f5f0; box-shadow:   0px 0px 15px 5px #68f5f0  }
	64% { background-color: #6bf568; box-shadow:   0px 0px 15px 5px #6bf568  }
	80% { background-color: #f5d968; box-shadow:   0px 0px 15px 5px #f5d968  }
	100% { background-color: #f56879; box-shadow:  0px 0px 15px 5px #f56879  }
}
@-webkit-keyframes deng {
	0% { background-color: #f56879; box-shadow:    0px 0px 15px 5px #f56879  }
	16% { background-color: #f568dc; box-shadow:   0px 0px 15px 5px #f568dc  }
	32% { background-color: #6b68f5; box-shadow:   0px 0px 15px 5px #6b68f5  }
	48% { background-color: #68f5f0; box-shadow:   0px 0px 15px 5px #68f5f0  }
	64% { background-color: #6bf568; box-shadow:   0px 0px 15px 5px #6bf568  }
	80% { background-color: #f5d968; box-shadow:   0px 0px 15px 5px #f5d968  }
	100% { background-color: #f56879; box-shadow:  0px 0px 15px 5px #f56879  }
}
#run_up li:nth-of-type(1) { animation-delay: .1s; -webkit-animation-delay: .1s; }
#run_up li:nth-of-type(2) { animation-delay: .2s; -webkit-animation-delay: .2s; }
#run_up li:nth-of-type(3) { animation-delay: .3s; -webkit-animation-delay: .3s; }
#run_up li:nth-of-type(4) { animation-delay: .4s; -webkit-animation-delay: .4s; }
#run_up li:nth-of-type(5) { animation-delay: .5s; -webkit-animation-delay: .5s; }
#run_up li:nth-of-type(6) { animation-delay: .6s; -webkit-animation-delay: .6s; }
#run_up li:nth-of-type(7) { animation-delay: .7s; -webkit-animation-delay: .7s; }
#run_up li:nth-of-type(8) { animation-delay: .8s; -webkit-animation-delay: .8s; }
#run_up li:nth-of-type(9) { animation-delay: .9s; -webkit-animation-delay: .9s; }
#run_right li:nth-of-type(1) { animation-delay: .1s; -webkit-animation-delay: .1s; }
#run_right li:nth-of-type(2) { animation-delay: .2s; -webkit-animation-delay: .2s; }
#run_right li:nth-of-type(3) { animation-delay: .3s; -webkit-animation-delay: .3s; }
#run_right li:nth-of-type(4) { animation-delay: .4s; -webkit-animation-delay: .4s; }
#run_down li:nth-of-type(9) { animation-delay: .1s; -webkit-animation-delay: .1s; }
#run_down li:nth-of-type(8) { animation-delay: .2s; -webkit-animation-delay: .2s; }
#run_down li:nth-of-type(7) { animation-delay: .3s; -webkit-animation-delay: .3s; }
#run_down li:nth-of-type(6) { animation-delay: .4s; -webkit-animation-delay: .4s; }
#run_down li:nth-of-type(5) { animation-delay: .5s; -webkit-animation-delay: .5s; }
#run_down li:nth-of-type(4) { animation-delay: .6s; -webkit-animation-delay: .6s; }
#run_down li:nth-of-type(3) { animation-delay: .7s; -webkit-animation-delay: .7s; }
#run_down li:nth-of-type(2) { animation-delay: .8s; -webkit-animation-delay: .8s; }
#run_down li:nth-of-type(1) { animation-delay: .9s; -webkit-animation-delay: .9s; }
#run_left li:nth-of-type(4) { animation-delay: .1s; -webkit-animation-delay: .1s }
#run_left li:nth-of-type(3) { animation-delay: .2s; -webkit-animation-delay: .2s; }
#run_left li:nth-of-type(2) { animation-delay: .3s; -webkit-animation-delay: .3s; }
#run_left li:nth-of-type(1) { animation-delay: .4s; -webkit-animation-delay: .4s; }
#run_up { width: 100%; height: auto; overflow: hidden; float: left; margin-top: 5px; }
#run_down { margin-top: 171px; position: absolute; width: 100%; }
#run_left { width: 15px; height: 150px; margin-left: 9px; float: left; margin-top: -8px; }
#run_left li, #run_right li { margin-left: 0; margin-top: 22px; }
#run_right { float: right; margin-right: 4px; width: 15px; height: 150px;margin-top: -8px; }
.num_box { height: 144px; width: 87%; margin-left: 6.5%; position: absolute;/*left:50%;margin-left:-370px;*/ z-index: 8; overflow: hidden; text-align: center; margin-top: 33px; }
.num { background: url(../images/num_022.png) top center repeat-y; width: 33%; height: 150px; float: left; background-size: 97px; background-position: center 30px; }
.btn { background: url(../images/btn.png) 0px 0px no-repeat; width: 210px; height: 37px; position: absolute; bottom: 9px; cursor: pointer; clear: both; background-size: contain; right: 30px; }
.xf { width: 100%; text-align: center; color: #c69504; position: absolute; bottom: 60px; font-size: 13px; }
.xf span { color: #ac0303 }
.jp { position: absolute; left: 30px; bottom: 5px; }
.jp img { width: 70px; }
.bottom_com { width: 100%; margin-top: 3px; position: relative; }
.bottom_com img { width: 100%; }
.text1 { color: #af8400; font-size: 12px; position: absolute; top: 20px;  margin-left: 5%; }
.text2 { color: #af8400; font-size: 12px; position: absolute; top: 150px; width: 90%; margin-left: 5%; height: 70px; overflow: scroll; }
@media screen and (min-width:410px) {
	/*plus*/
	.lhj_con { height: 275px; }
	#run_right { margin-right: 6px; margin-top: -11px;}
	#run_left { margin-left: 11px;margin-top: -11px; }
	#run_down { margin-top: 175px; }
	#run_up{  margin-top: -8px; }
	.marquee { margin-top: 16px; }
	#run_left li, #run_right li { margin-top: 26px; }
	#run_up li, #run_down li { margin-left: 7.8% }
	.num_box { margin-top: 26px; }
	.text1 { top: 30px; }
	.text2 { top: 170px; }
	.btn ,.jp{ bottom: 0 }
}
@media screen and (max-width:370px) {
	/*vivo*/
	.lhj_con { height: 245px; }
	#run_up { margin-top: -7px; float: left; }
	#run_right { margin-right: 3px; }
	#run_left { margin-left: 8px; }
	#run_down { margin-top: 152px; }
	.marquee { margin-top: 14px; }
	.num_box { margin-top: 18px; }
	.text1 { top: 20px; }
	.text2 { top: 145px; }
	.xf{ bottom: 50px; }
	.btn ,.jp{ bottom: 0 }
}

/*中奖纪录*/
#marquee { overflow: hidden; }
#marquee ul li { float: left; width: auto; padding: 0 10px; }
/*抽奖弹层*/
.mask{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999 }
.mask_bg{ position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; background-color: #000; opacity: .7; }
.mask_con{ width: 100%; height: 100%; position: absolute; z-index: 2; left: 0; top: 0;  background-image: url(../images/prize.png); background-size: cover; background-position: center;}
.btn_again{ width: 180px; position: absolute; left: 50%; margin-left: -90px; top: 75%; z-index: 3}
.mask_title{ width: 100%; text-align: center; position: relative; top: 50%; margin-top: -40px; color: #c69504}
.mask_img{ width: 100%; text-align: center; position: relative; top: 50%; margin-top: -25px; }
.mask_img img{ width: 100px; }

